<!--


Developer Nikola Lukic


original source : Credits for  Muaz Khan
canvas source : Nikola Lukic 

> Muaz Khan     - github.com/muaz-khan 
> MIT License   - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <title>unlimit chat</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!--link rel="stylesheet" href="//cdn.webrtc-experiment.com/style.css"-->
<link rel="stylesheet" href="css/style_controler.css">
<style>
@font-face {
    font-family: font_2;
    src: url(css/Righteous-Regular.ttf);
}
@font-face {
    font-family: font_1;
    src: url(css/led_sas.ttf);
}
@font-face {
    font-family: font_3;
    src: url(css/space_up_yer_life.ttf);
}

 
 input { padding:3px; font-size:16px; border-width:6px; border-radius:30px; border-style:double; background-color:#ff1981; border-color:#891f8f; box-shadow:inset -1px 0px 30px 0px rgba(42,42,42,.90); text-shadow:-2px 2px 2px rgba(42,42,42,.75);  } 
 input:focus { outline:none; } 

</style>
    <script>
    document.createElement('article');
    document.createElement('footer');
    </script>
    <!-- webrtc library used for streaming -->
    <script src="https://sweltering-inferno-3878.firebaseIO.com/test"></script>
    <script src="//cdn.webrtc-experiment.com/getMediaElement.min.js"></script>
    <script src="//cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>
	<script src="surface/init.js"></script>
	<script src="surface/global.js"></script>
	<script src="surface/func.js"></script>
	<script src="surface/sequence.js"></script>


</head>

<body>
<canvas id="NINDZICA" width="694" height="407" style="position:absolute;left:0;top:0;cursor: default;background-color:black;"></canvas>
<script src="surface/voice.js"></script>
<script src="surface/canvas.js"></script>
<script src="surface/objects.js"></script>
<script src="surface/table_parts.js"></script>
<script src="surface/draw.js"></script>
<script src="surface/mobile_control.js"></script>
<script src="surface/events.js"></script>
<script src="surface/audio.js"></script>
<script src="surface/onresize.js"></script>
<script src="surface/main.js"></script>
<script>
 
</script>



<div id="name_of_session" style="display:none;position:absolute;left:45%;top:40%;width:20%;height:auto;-webkit-box-shadow: 0px -1px 96px 4px rgba(89,13,56,0.75);
-moz-box-shadow: 0px -1px 96px 4px rgba(89,13,56,0.75);
box-shadow: 0px -1px 96px 4px rgba(89,13,56,0.75);">
<input type="text" id="session-name" placeholder="enter your channel name" style="width:100%;
  -moz-box-shadow:    0px 0px 5px 6px #ccc;
  -webkit-box-shadow: 0px 0px 5px 6px #ccc;
  box-shadow:         0px 0px 5px 6px #ccc; background-color:rgb(89,13,56);">
</div>



    <div id="videos-container" style="display:none;position:absolute;left:5%;top:20%;width:40%;height:auto;-webkit-box-shadow: 0px -1px 96px 4px rgba(89,13,56,0.75);
-moz-box-shadow: 0px -1px 96px 4px rgba(89,13,56,0.75);
box-shadow: 0px -1px 96px 4px rgba(89,13,56,0.75);"></div>
	
	
            <table style="height:auto;width: 100%;position:absolute;left:1%;bottom:30%;width:27%;height:auto;-webkit-box-shadow: 0px -1px 96px 4px rgba(89,13,56,0.75);
-moz-box-shadow: 0px -1px 96px 4px rgba(89,13,56,0.75);
box-shadow: 0px -1px 96px 4px rgba(89,13,56,0.75); " id="rooms-list"></table>


	   <div style="height:auto;width: 100%;position:absolute;left:30.3%;bottom:11%;width:60%;height:auto;-webkit-box-shadow: 0px -1px 96px 4px rgba(89,13,56,0.75);
-moz-box-shadow: 0px -1px 96px 4px rgba(89,13,56,0.75);
box-shadow: 0px -1px 96px 4px rgba(89,13,56,0.75);" id="chat-output"></div>
       <input type="text" id="chat-input" style="font-size: 1.2em;width: 150%;position:absolute;left:31%;bottom:5%;width:60%;" placeholder="chat message" disabled>


    <article style="position:absolute;left:0;bottom:0;font-family:font_1" id="debugger_" >
        <!-- just copy this <section> and next script -->
        <section style="float: right;display:none">
            <div style="float: right;display:none">
                <input type="checkbox" id="fakeDataChannels" style="width: auto;">
                <label for="fakeDataChannels" title="You can chat and share files using your preferred signaling gateway instead of using WebRTC data channels!">Setup Fake Data Connection?</label>
            </div>
            <section>
                <select id="session" title="Session">
                    <option>audio+video+data+screen</option>
                    <option>audio+video+data</option>
                    <option>audio+data+screen</option>
                    <option>audio+video+screen</option>
                    <option selected>audio+video</option>
                    <option>audio+screen</option>
                    <option>video+screen</option>
                    <option>data+screen</option>
                    <option>audio+data</option>
                    <option>video+data</option>
                    <option>audio</option>
                    <option>video</option>
                    <option>data</option>
                    <option>screen</option>
                </select>
                <select id="direction" title="Direction">
                    <option>many-to-many</option>
                    <option>one-to-one</option>
                    <option>one-to-many</option>
                    <option>one-way</option>
                </select>
                
                <button id="setup-new-session">New Session</button>
            </section>

            <!-- list of all available broadcasting rooms -->

            <!-- local/remote videos container  disabled btnFile-->
        
        </section>

	</article>

<div style="position:absolute;left:1%;height:24%;bottom:0%;width:25%;-webkit-box-shadow: 0px -1px 96px 4px rgba(89,13,56,0.75);-moz-box-shadow: 0px -1px 96px 4px rgba(89,13,56,0.75);box-shadow: 0px -1px 96px 4px rgba(89,13,56,0.75);">
<h2 style="display: block; font-size: 1em; text-align: center;">Share File</h2>
<!--div style='height: 30px;width: 70%; overflow:hidden;' -->
<!--div style="position:absolute;">Choose file</div--> 
<input style="opacity:1;width: 80%;" class="" type="file" id="file" > 

<div id="file-progress"></div>

 

</div>

        <script>

   function trigerCHOOSE_FILE(){
   
   
   }








        // Muaz Khan     - www.MuazKhan.com
        // MIT License   - www.WebRTC-Experiment.com/licence
        // Documentation - www.RTCMultiConnection.org

        var connection = new RTCMultiConnection();

        connection.session = {
            audio: true,
            video: true
        };

        var roomsList = document.getElementById('rooms-list'),
            sessions = {};
        connection.onNewSession = function(session) {
            if (sessions[session.sessionid]) return;
            sessions[session.sessionid] = session;

            var tr = document.createElement('tr');
            tr.innerHTML = '<div><strong style="font-size:35px;" >' + session.extra['session-name'] + '</strong>' + '<button class="btn">Join</button></div>';
            roomsList.insertBefore(tr, roomsList.firstChild);

            tr.querySelector('.btn').setAttribute('data-sessionid', session.sessionid);
            tr.querySelector('.btn').onclick = function() {
                this.disabled = true;

                session = sessions[this.getAttribute('data-sessionid')];
                if (!session) alert('No room to join.');

                connection.join(session);
            };
        };

        var videosContainer = document.getElementById('videos-container') || document.body;
        connection.onstream = function(e) {
            var buttons = ['mute-audio', 'mute-video', 'record-audio', 'record-video', 'full-screen', 'volume-slider', 'stop'];

            if (connection.session.audio && !connection.session.video) {
                buttons = ['mute-audio', 'full-screen', 'stop'];
            }

            var mediaElement = getMediaElement(e.mediaElement, {
                width: (videosContainer.clientWidth / 2) - 50,
                title: e.userid,
                buttons: buttons,
                onMuted: function(type) {
                    connection.streams[e.streamid].mute({
                        audio: type == 'audio',
                        video: type == 'video'
                    });
                },
                onUnMuted: function(type) {
                    connection.streams[e.streamid].unmute({
                        audio: type == 'audio',
                        video: type == 'video'
                    });
                },
                onRecordingStarted: function(type) {
                    // www.RTCMultiConnection.org/docs/startRecording/
                    connection.streams[e.streamid].startRecording({
                        audio: type == 'audio',
                        video: type == 'video'
                    });
                },
                onRecordingStopped: function(type) {
                    // www.RTCMultiConnection.org/docs/stopRecording/
                    connection.streams[e.streamid].stopRecording(function(blob) {
                        if (blob.audio) connection.saveToDisk(blob.audio);
                        else if (blob.video) connection.saveToDisk(blob.video);
                        else connection.saveToDisk(blob);
                    }, type);
                },
                onStopped: function() {
                    connection.peers[e.userid].drop();
                }
            });

            videosContainer.insertBefore(mediaElement, videosContainer.firstChild);

            if (e.type == 'local') {
                mediaElement.media.muted = true;
                mediaElement.media.volume = 0;
            }
        };

        connection.onstreamended = function(e) {
            if (e.mediaElement.parentNode && e.mediaElement.parentNode.parentNode && e.mediaElement.parentNode.parentNode.parentNode) {
                e.mediaElement.parentNode.parentNode.parentNode.removeChild(e.mediaElement.parentNode.parentNode);
            }
        };

        var setupNewSession = document.getElementById('setup-new-session');

        setupNewSession.onclick = function() {
		
			TYPE_OF_STEAM.VISIBLE = false;
		    ELEMENT("name_of_session").style.display = "none";
			ELEMENT("videos-container").style.display = "block";
			
            setupNewSession.disabled = true;

            var direction = document.getElementById('direction').value;
            var _session = document.getElementById('session').value;
            var splittedSession = _session.split('+');

            var session = {};
            for (var i = 0; i < splittedSession.length; i++) {
                session[splittedSession[i]] = true;
            }

            var maxParticipantsAllowed = 256;

            if (direction == 'one-to-one') maxParticipantsAllowed = 1;
            if (direction == 'one-to-many') session.broadcast = true;
            if (direction == 'one-way') session.oneway = true;

            var sessionName = document.getElementById('session-name').value;
            connection.extra = {
                'session-name': sessionName || 'Anonymous'
            };

            connection.session = session;
            connection.maxParticipantsAllowed = maxParticipantsAllowed;

            if (!!document.querySelector('#fakeDataChannels').checked) {
                // http://www.rtcmulticonnection.org/docs/fakeDataChannels/
                connection.fakeDataChannels = true;
            }

            connection.sessionid = sessionName || 'Anonymous';
            connection.open();
        };

        connection.onmessage = function(e) {
            appendDIV(e.data);

            console.debug(e.userid, 'posted', e.data);
            console.log('latency:', e.latency, 'ms');
        };

        connection.onclose = function(e) {
            appendDIV('Data connection is closed between you and ' + e.userid);
        };

        connection.onleave = function(e) {
            appendDIV(e.userid + ' left the session.');
        };

        // on data connection gets open
        connection.onopen = function() {
            if (document.getElementById('chat-input')) document.getElementById('chat-input').disabled = false;
            if (document.getElementById('file')) document.getElementById('file').disabled = false;
            if (document.getElementById('open-new-session')) document.getElementById('open-new-session').disabled = true;
        };

        var progressHelper = {};

        connection.autoSaveToDisk = false;

        connection.onFileProgress = function(chunk) {
            var helper = progressHelper[chunk.uuid];
            helper.progress.value = chunk.currentPosition || chunk.maxChunks || helper.progress.max;
            updateLabel(helper.progress, helper.label);
        };
        connection.onFileStart = function(file) {
            var div = document.createElement('div');
            div.title = file.name;
            div.innerHTML = '<label>0%</label> <progress></progress>';
            appendDIV(div, fileProgress);
            progressHelper[file.uuid] = {
                div: div,
                progress: div.querySelector('progress'),
                label: div.querySelector('label')
            };
            progressHelper[file.uuid].progress.max = file.maxChunks;
        };

        connection.onFileEnd = function(file) {
            progressHelper[file.uuid].div.innerHTML = '<a href="' + file.url + '" target="_blank" download="' + file.name + '">' + file.name + '</a>';
        };

        function updateLabel(progress, label) {
            if (progress.position == -1) return;
            var position = +progress.position.toFixed(2).split('.')[1] || 100;
            label.innerHTML = position + '%';
        }

        function appendDIV(div, parent) {
            if (typeof div === 'string') {
                var content = div;
                div = document.createElement('div');
                div.innerHTML = content;
            }

            if (!parent) chatOutput.insertBefore(div, chatOutput.firstChild);
            else fileProgress.insertBefore(div, fileProgress.firstChild);

            div.tabIndex = 0;
            div.focus();
        }

        document.getElementById('file').onchange = function() {
            connection.send(this.files[0]);
        };

        var chatOutput = document.getElementById('chat-output'),
            fileProgress = document.getElementById('file-progress');

        var chatInput = document.getElementById('chat-input');
        chatInput.onkeypress = function(e) {
            if (e.keyCode !== 13 || !this.value) return;
            appendDIV(this.value);

            // sending text message
            connection.send(this.value);

            this.value = '';
        };

        connection.connect();
        </script>
</body>






</html>